<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">

    <!-- 顶部搜索栏子组件 -->
    <SearchForm
    @handle-reset="handleReset"
    @handle-search="handleSearch"
    @handle-clear="handleClear"
    :search-data="pagination"
    />

    <!-- 使用数据列表子组件 -->
    <TableList 
    @handle-disable="handleDisableDialog"
    @handle-delete="handleDeleteDialog"
    @handle-edit="handleEdit"
    @handle-bulid="handleBulid"
    @give-pagination="changePage"
    :tableData="tableData" 
    :total="total" 
    :pagination="pagination" />

    <!-- 弹窗子组件 -->
     <DialogForm
     ref="formRef"
     :title="title"
     :visible="visible"
     :data="formBaseData"
     @handleClose="handleClose"
     @handle-add="handleAdd"
     @handle-edit="editNursingProject"
     />

     <!-- 删除弹窗子组件 -->
      <DeleteDialog
      @handle-delete="handleDelete"
      @handle-close="handleDeleteDialogClose"
      :visible="deleteDialogvisible"
      />

      <!-- 禁用弹框子组件 -->
       <DisableDialog
       @handle-click="handleDisable"
       @handle-close="handleDisableDialogClose"
       :visible="disableDialogvisible"
       />
  </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getProjectDetails, getProjectList, projectAdd, projectDelete, projectStatus, projectUpdate } from '@/api/serve';
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import DeleteDialog from '@/components/OperateDialog/index.vue'
import DisableDialog from '@/components/OperateDialog/disable.vue'
import { MessagePlugin } from 'tdesign-vue-next';

const formRef = ref(null);

const formBaseData = ref({});
/* 弹窗标题 */
const title = ref('新增');

// 新增/编辑弹窗显示隐藏
const visible = ref(false);

// 删除弹窗显示隐藏
const deleteDialogvisible = ref(false);

// 禁用弹窗显示隐藏
const disableDialogvisible = ref(false);

//分页搜索对象
const pagination = ref({
pageSize: 5,
pageNum: 1
})
/* 表格列表数据 */
const tableData = ref([]);
/* 总记录数 */
const total = ref(0);

/* 项目id */
const projectId = ref(null);
/* 项目对象 */
const project = ref(null);


/* ======================方法定义=================================== */
/* 子传父：分页查询护理项数据 */
const changePage = (val)=>{
console.log("===>"+JSON.stringify(val));
pagination.value.pageSize = val.pageSize;
pagination.value.pageNum = val.current;
pageQuery();
}

/* 分页查询护理项 */
const pageQuery = async () => {
const result = await getProjectList(pagination.value);
if (result.code === 200) {
  tableData.value = result.data.records;
  total.value = result.data.total;
}
}
onMounted(() => {
pageQuery()
})

const handleClear = (val) => {
console.log(val);
if(val === 'name'){
  delete pagination.value.name;
}else if(val === 'status'){
  delete pagination.value.status;
}
pageQuery();
}

const handleSearch = () => {
console.log(pagination.value);
pageQuery();
}

const handleReset = () => {
//删除pagination对象中的name属性
delete pagination.value.name;
//删除pagination对象中的status属性
delete pagination.value.status;
pageQuery();
}

// 点击新增按钮,打开弹窗
const handleBulid = (val) => {
debugger;
visible.value = true;
}
// 关闭弹窗,重置visible.value
const handleClose = () => {
debugger;
visible.value = false;
}

/* 新增项目 */
const handleAdd = async (val) => {
debugger;
const res = await projectAdd(val);
if (res.code === 200) {
  MessagePlugin.success('添加成功')
  pageQuery()
  handleClose()
  formRef.value.handleClear()
} else {
  MessagePlugin.error(res.msg)
}
}

//打开删除弹框
const handleDeleteDialog = (id) => {
debugger;
projectId.value = id;
deleteDialogvisible.value = true;
}
// 关闭删除弹框
const handleDeleteDialogClose = () => {
debugger;
deleteDialogvisible.value = false;
}
/* 删除项目 */
const handleDelete = async () => {
debugger;
const res = await projectDelete(projectId.value);
if (res.code === 200) {
  MessagePlugin.success('删除成功')
  pageQuery()
  handleDeleteDialogClose()
} else {
  MessagePlugin.error(res.msg)
}
}

/* 打开禁用弹框 */
const handleDisableDialog = (val) => {
debugger;
project.value = val;
disableDialogvisible.value = true;
}
/* 关闭禁用弹框 */
const handleDisableDialogClose = () => {
debugger;
disableDialogvisible.value = false;
}

/* 禁用项目 */
const handleDisable = async () => {
debugger;
const res = await projectStatus(project.value);
if (res.code === 200) {
  MessagePlugin.success('禁用成功')
  pageQuery()
  handleDisableDialogClose()
} else {
  MessagePlugin.error(res.msg)
}
}



/* 打开编辑弹框 */
const handleEdit = (val) => {
debugger;
title.value = '编辑';
//查询数据
getDetail(val.id);
//将val对象拷贝一份给formBaseData.value
// formBaseData.value = {...val}
// formBaseData.value = val
visible.value = true;
}
/* 根据id查询项目详情 */
const getDetail = async (id)=>{
const result = await getProjectDetails(id);
if (result.code === 200) {
  formBaseData.value = result.data
}
}


/* 编辑项目 */
const editNursingProject = async (val) => {
debugger;
const res = await projectUpdate(val);
if (res.code === 200) {
  MessagePlugin.success('编辑成功')
  pageQuery()
  handleClose()
  formRef.value.handleClear()
} else {
  MessagePlugin.error(res.msg)
}
}
</script>

